<template>
  <div id="taskSortIndex">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:taskWorksTops:remove'"
        type="warning"
        @click="delTopAll()"
      >
        取消置顶
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column label="置顶时间" prop="createDate" min-width="160">
        <template slot-scope="scope">
          {{ scope.row.createDate | timeToTime }}
        </template>
      </el-table-column>
      <el-table-column label="置顶类别" prop="topType" min-width="100">
        <template slot-scope="scope">
          <span
            v-if="scope.row.topType"
            :class="scope.row.topType | filterClass('topType')"
            >{{ scope.row.topType | filterName('topType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="内容类型" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.topType && scope.row.topType === 'MOVIE'">
            长视频
          </span>
          <span
            v-else-if="
              scope.row.workType ||
                scope.row.jobType ||
                scope.row.lifeType ||
                scope.row.readType
            "
            >{{
              scope.row.workType ||
                scope.row.jobType ||
                scope.row.lifeType ||
                scope.row.readType | filterName('contentType')
            }}</span
          >
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布人"
        prop="nickname"
        min-width="120"
      ></el-table-column>
      <el-table-column label="作业码" prop="identCode" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.identCode">{{ scope.row.identCode }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        label="作业/动态内容"
        prop="content"
        width="150"
        class-name="text-overflow"
      >
        <!--此处展示100字以内，宽度width不要改变-->
        <template slot-scope="scope">
          <span
            v-if="scope.row.content"
            class="textContent"
            v-html="filterContent(scope.row)"
            :title="scope.row.content"
          ></span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="视图内容" min-width="120">
        <template slot-scope="scope">
          <!--图片-->
          <span v-if="!scope.row.video">
            <listImgString
              v-if="scope.row.img"
              :imgInfo="scope.row.img"
            ></listImgString>
            <template v-else>-</template>
          </span>
          <!--视频-->
          <span v-else class="img-box" @click="videoPlay(scope.row.video)">
            <div class="img-inner-box">
              <el-image fit="contain" :src="scope.row.img"></el-image>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="点赞数"
        prop="praiseNumber"
        min-width="80"
      ></el-table-column>
      <el-table-column
        label="评论数"
        prop="commentNum"
        min-width="80"
      ></el-table-column>
      <el-table-column
        label="显示顺序"
        prop="orderNumber"
        min-width="100"
      ></el-table-column>
      <el-table-column label="用户属性" prop="userProperty" width="80">
        <template slot-scope="scope">
          <span
            v-if="scope.row.userProperty"
            class="tag-span"
            :class="scope.row.userProperty | filterClass('topUserAttr')"
            >{{ scope.row.userProperty | filterName('topUserAttr') }}</span
          >
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:system:taskWorksTops:detail'"
            type="text"
            @click="showDetail(scope.row)"
          >
            查看详情
          </el-button>
          <el-button
            v-permission="'wh:system:taskWorksTops:edit'"
            type="text"
            @click="showSort(scope.row)"
          >
            编辑排序
          </el-button>
          <el-button
            v-permission="'wh:system:taskWorksTops:remove'"
            type="text"
            @click="delTop(scope.row.jobcompletionId)"
          >
            取消置顶
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <dialogDetailCom
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
    ></dialogDetailCom>
    <dialogReadDetail
      v-if="dialogReadData.isShow"
      :dialog-data="dialogReadData"
    ></dialogReadDetail>
    <!---长视频类型查看详情-->
    <detailMovieDialog
      v-if="dialogMovieData.isShow"
      :dialog-data="dialogMovieData"
    ></detailMovieDialog>
    <dialogSort
      v-if="sortData.isShow"
      :sort-data="sortData"
      @refresh="refresh"
    ></dialogSort>
    <!--播放视频组件-->
    <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
  </div>
</template>

<script>
import {
  getSearchList,
  batchRemove,
  deleteReq
} from '@/api/placingOrder/taskSort' // 接口
import topSearch from '@component/placingOrder/taskSort/topSearch' // 上部搜索条件
import dialogDetailCom from '@common/dialogDetailCom' // 详情-弹窗-公共组件
import dialogReadDetail from '@component/readManagement/common/dialogReadDetail' //阅读图文-详情弹窗
import detailMovieDialog from '@component/longVidManagement/common/detailDialog' // 查看详情
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import showVideo from '@common/showVideo'
import { getVideoImg } from '@utils/getFaceImg'
import dialogSort from '@component/placingOrder/taskSort/dialogSort' // 排序弹窗
import { filterCon, getVideoPara } from '@utils/pubFunction' // 内容筛选
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'manage',
  msg: '作业作品生活置顶排序',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogDetailCom,
    dialogReadDetail,
    detailMovieDialog,
    showVideo,
    dialogSort,
    listImgString
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      tableTemp: [], // table替代
      tempSize: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        topType: '', // 置顶类型
        contentType: '', // 内容类型
        userProperty: '', // 用户属性
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: '',
        topType: '' // 编辑时，传递的参数
      },
      dialogReadData: {
        isShow: false, // 默认隐藏
        params: '' // 编辑时，传递的参数
      },
      // 长视频查看详情
      dialogMovieData: {
        isShow: false, // 默认隐藏
        params: ''
      },
      sortData: {
        isShow: false, // 默认隐藏
        params: '',
        total: ''
      },
      videoData: {
        // 视频播放弹窗
        isShow: false,
        vid: ''
      },
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: ''
      },
      multipleSelection: [],
      powerStr: 'system:taskWorksTops:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
      })
    },
    /* 获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      getVideoPara().then(
        (res) => {
          // 接口请求正常
          this.polivNum.polyvUserId = res.polyvUserId
          this.polivNum.polyvSecretKey = res.polyvSecretKey
          let n = 0
          if (!this.tableTemp || this.tableTemp.length === 0) {
            return
          }
          this.tableTemp.forEach((item, index) => {
            _this.getImg(item.video, index).then(
              (data) => {
                n++
                _this.setData(n)
              },
              () => {
                n++
                _this.setData(n)
              }
            )
          })
        },
        (res) => {
          // 接口请求不正常正常
          _this.tableData = [..._this.tableTemp]
        }
      )
    },
    /*  符合条件后，给table赋值 */
    setData(n) {
      if (n === this.tempSize) {
        this.loading = false
        this.tableData = [...this.tableTemp]
      }
    },
    /* 获取封面图 */
    getImg(video, index) {
      if (!video) return Promise.resolve(false)
      let _this = this
      return getVideoImg(video, this.polivNum).then(
        (res) => {
          _this.tableTemp[index].img = res
          return Promise.resolve(true)
        },
        (error) => {
          return Promise.reject(error)
        }
      )
    },
    /* 播放视频 */
    videoPlay(vid) {
      if (!vid) {
        this.$message.warning('无视频资源！')
        return
      }
      this.videoData.vid = vid
      this.videoData.isShow = true
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = Object.assign({}, this.searchParams, this.formInline)
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableTemp = response.rows
          this.tableData = response.rows
          this.tempSize = response.rows.length
          this.total = response.total
          this.getPolivNum()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 取消置顶-批量 */
    delTopAll() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认删除这${this.multipleSelection.length}条置顶信息吗?`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.id)
        })
        let obj = { ids }
        batchRemove(obj, (response) => {
          this.$message({
            message: '取消置顶成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    /* 取消置顶-单个 */
    delTop(jobcompletionId) {
      this.$confirm('确定删除该条置顶信息吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteReq(jobcompletionId, (response) => {
          this.$message({
            message: '取消置顶成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    /* 显示详情 */
    showDetail(item) {
      let type = item.topType
      switch (type) {
        case 'ARTICLE':
          //阅读图文
          this.dialogReadData.isShow = true
          this.dialogReadData.params = item.jobcompletionId
          break
        case 'MOVIE':
          //长视频
          this.dialogMovieData.isShow = true
          this.dialogMovieData.params = item.jobcompletionId
          break
        case 'LIFE':
          //生活
          this.dialogData.type = 'lifDetail'
          this.dialogData.lifeId = item.jobcompletionId
          this.dialogData.isShow = true
          this.dialogData.title = '查看详情'
          break
        default:
          //作业作品
          this.dialogData.type = item.topType
          this.dialogData.isShow = true
          this.dialogData.title = '作业作品置顶详细'
          this.dialogData.id = item.jobcompletionId
      }
    },
    /* 编辑排序 */
    showSort(item) {
      this.sortData.total = this.total
      this.sortData.isShow = true
      this.sortData.params = {
        orderNumber: item.orderNumber,
        id: item.id
      }
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return filterCon(item)
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#taskSortIndex {
  @import url('~@common/style/imgBox.less');
  @import url('~@common/style/clamp.less');
  .text-overflow {
    .cell {
      /*覆盖引入的公共样式-clamp.less*/
      -webkit-line-clamp: 10;
    }
  }
}
</style>
